<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<ul id="menu"></ul>

<script>
    // 定义菜单数据
    const menuItems = [
        { label: '首页', url: '/home' },
        { label: '关于我们', url: '/about' },
        { label: '服务', url: '/services' },
        { label: '联系我们', url: '/contact' }
    ];

  function createMenuItem(menuItems, container) {
    // 创建 ul 元素
    const liElement = document.createElement('li');
    const aElement = document.createElement('a');
    aElement.href = menuItems.url;
    aElement.textContent = menuItems.label;
    liElement.appendChild(aElement);
    container.appendChild(liElement);
  }

  function createMenu() {
      let elementById = document.getElementById("menu");
      menuItems.forEach(item=>{
          createMenuItem(item,elementById);
      })
  }
  document.addEventListener("DOMContentLoaded", function() {
      createMenu();
  })

</script>


</body>
</html>